<template>
  <div>
    <Sidebar></Sidebar>
    <div class="content">
      <div class="head">
        <span class="title">全部歌单</span>
      </div>
      <div class="songs" v-for="song in songs" :key="song.id">
        <div class="song">
          <div class="imgs">
            <img
              :src="song.coverImgUrl"
              :alt="song.name"
              :title="song.name"
              class="img"
            />
          </div>

          <div class="words">
            <div class="name">{{ song.name }}</div>
            <div class="by">
              by <i class="author">{{ song.creator.nickname }}</i>
              <!-- <img :src="song.creator.avatarDetail.identityIconUrl" alt=""> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sidebar from "@/components/Sidebar";
import { resHotSongs } from "@/api";
export default {
  name: "songs",
  data() {
    return {
      songs: [],
    };
  },
  components: {
    Sidebar,
  },
  mounted() {
    this.getSongs();
  },
  methods: {
    async getSongs() {
      await resHotSongs(90)
        .then((res) => {
          console.log(res.data.playlists);
          this.songs = res.data.playlists;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  margin: 0em 10em;
  background: #eee;
  padding: 0em 3.5em;
  .head {
    margin: 0em 1.5em;
    padding-top: 2em;
    border-bottom: 2.5px solid rgb(206, 5, 5);
    .title {
      font-size: 1.3em;
    }
  }
  .songs {
    display: inline-block;
    justify-content: center;
    .song {
      margin: 1.5em;
      .imgs {
        white-space: nowrap;
        display: flex;
        justify-content: center;
      }
      .img {
        width: 8em;
      }
      .words {
        width: 8em;
        margin-top: 0.4em;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .name {
        font-size: 0.66em;
      }
      .by {
        font-size: 0.5em;
        .author {
          margin-top: 0.1em;
          color: rgb(129, 130, 132);
        }
      }
      .author:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>